
// 确保在 DOM 加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 使用 ID 选择器而不是类选择器，或者确保 .j1 类存在
  const chartDom = document.querySelector('.j3');
  
  // 检查元素是否存在
  if (!chartDom) {
    console.error('找不到图表容器元素，请确保页面上有 .j1 类的元素');
    return;
  }
  
  // 确保元素有宽度和高度
  if (!chartDom.style.width) chartDom.style.width = '600px';
  if (!chartDom.style.height) chartDom.style.height = '500px';
  
  // 初始化 ECharts 实例
  const myChart = echarts.init(chartDom);
  
  // 设置图表选项
  option = {
    title: {
      text: '骑手全年接单天数分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}% ({d}%)'
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        // magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['不足30天', '30-260天', '260天以上']
    },
    series: [
      {
        name: '骑手接单天数分布',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 48, name: '不足30天', itemStyle: { color: 'rgb(213, 118, 108)' } },
          { value: 41, name: '30-260天', itemStyle: { color: 'rgb(138, 138, 138)' } },
          { value: 11, name: '260天以上', itemStyle: { color: 'rgb(117, 143, 220)' } }
        ],
        label: {
          formatter: '{b}: {d}%'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
};
option && myChart.setOption(option);
  
  // 使用配置项显示图表
  myChart.setOption(option);
  
  // 监听窗口大小变化，自动调整图表大小
  window.addEventListener('resize', function() {
    myChart.resize();
  });
});